import React, {
    PureComponent
} from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    PixelRatio,
    Dimensions
} from "react-native";
import {
    color
} from "../../widget/color";
import {
    Heading1,
    Heading2,
    Heading3,
    Paragraph,
    Tip,
    Tip2,
    Tip3
} from "../../widget/Text";
import CornerLabel from 'react-native-smart-corner-label'
import SelectRebateCountDown from './SelectRebateCountDown'


const {
    width
} = Dimensions.get('window')

type Props = {
    info: Object,
    onPress: Function,
}

class SelectGoodCourseCell extends PureComponent < Props > {

    constructor(props){
        super(props)
        this.state = {
            text_height:0,
        }
    }

    render() {
        let {
            info
        } = this.props
        let start_time = info.start_date.substr(5, 5).replace('-', '月') + '日'
        let end_time = info.end_date.substr(5, 5).replace('-', '月') + '日'

        var showText = ''
        var show_txt = '仅剩'
        let ren = ''

        if (info.buys >= info.totals * 0.8 && info.buys < info.totals) {
            showText = info.remains
            show_txt = '仅剩'
            ren = '/' + info.totals + '人'
        } else if (info.buys >= info.totals) {
            show_txt = ''
            ren = ''
            showText = '已售罄'
        } else {
            showText = info.buys
            show_txt = '已报名'
            ren = '/' + info.totals + '人'
        }




        return (
            <TouchableOpacity style={[styles.container,{overflow: 'hidden'}]} onPress={()=>{this.props.onPress(info)}}>
                {this.isRenderZhe()}
                <View style={{flexDirection:'row',backgroundColor:'white',marginTop:15,width:width-60}}>
                    <View style={{backgroundColor:'#db3843',borderRadius:2,padding:3,}}>
                        <Text style={{color:'#FFFFFF',fontWeight:'bold',fontSize:11,}}>{info.subject}</Text>
                    </View>
                    <View style={{backgroundColor:'white',borderRadius:2,padding:2,marginLeft:6,borderColor:'#DB3843',borderWidth:1,marginRight:4}}>
                        <Text style={{color:'#DB3843',fontSize:11,}}>{info.tag}</Text>
                    </View>
                    <Text numberOfLines={1} style={styles.title}>{info.title}</Text>
                </View>
                <View style={{flexDirection:'row',backgroundColor:'white',marginTop:12,alignItems:'center',}}>
                    <Image style={{width:12,height:12}} source={require('../../../res/img/select/select_time.png')}/>
                    <Text style={[styles.time,{marginLeft:7}]}>{start_time+'到'+end_time}</Text>
                </View>
                <View style={{flexDirection:'row',backgroundColor:'white',marginTop:15,alignItems:'center',}}>
                    <View style={{flexDirection:'row',alignItems:'center',}}>
                        <Image style={{width:28,height:28,borderRadius:14}} source={{uri:info.zhu_teacher.img}}/>
                        <View style={{marginLeft:10,justifyContent:'center',height:28}}>
                            <Text style={styles.teacher_show}>讲师</Text>
                            <Text style={styles.teacher}>{info.zhu_teacher.name}</Text>
                        </View>
                    </View>
                    <View style={{flexDirection:'row',alignItems:'center',marginLeft:30}}>
                        <Image style={{width:28,height:28,borderRadius:14}} source={{uri:info.fu_teacher.img}}/>
                        <View style={{marginLeft:10,justifyContent:'center',height:28}}>
                            <Text style={styles.teacher_show}>辅导</Text>
                            <Text style={styles.teacher}>{info.fu_teacher.name}</Text>
                        </View>
                    </View>
                </View>
                <View style={{width:(width - 24 -20),backgroundColor:'rgba(0,0,0,0.1)',height:1,marginTop:15}}/>
                {this.isRenderRebate()}
            </TouchableOpacity>
        )
    }

    isRenderZhe(){
        let {
            info
        } = this.props
        if (info.discounts.length > 0){
            var item = info.discounts[0]
            var discount_start = new Date(item.start_at.replace(/-/g,"/")).getTime()
            var current_time = new Date().getTime()
            var discount_end = new Date(item.end_at.replace(/-/g,"/")).getTime()
            var discount = item.discount*10 + '折'
        }
        if (info.discounts.length > 0 &&  (current_time > discount_start > 0) && (current_time < discount_end)){
            return <CornerLabel
                alignment={'right'}
                cornerRadius={36}
                style={{backgroundColor: '#DB3843',}}
                textStyle={{fontSize: 12, color: 'white',marginTop:8}}>
                {discount}
            </CornerLabel>
        } else {
            return <View/>
        }
    }

    isRenderRebate(){
        let {
            info
        } = this.props

        var showText = ''
        var show_txt = '仅剩'
        let ren = ''

        if (info.buys >= info.totals * 0.8 && info.buys < info.totals) {
            showText = info.remains
            show_txt = '仅剩'
            ren = '/' + info.totals + '人'
        } else if (info.buys >= info.totals) {
            show_txt = ''
            ren = ''
            showText = '已售罄'
        } else {
            showText = info.buys
            show_txt = '已报名'
            ren = '/' + info.totals + '人'
        }
        if (info.discounts.length > 0){
            var item = info.discounts[0]
            var discount_start = new Date(item.start_at.replace(/-/g,"/")).getTime()
            var current_time = new Date().getTime()
            var discount_end = new Date(item.end_at.replace(/-/g,"/")).getTime()
            var discount = item.discount*10
        }
        if (info.discounts.length > 0 &&  (current_time > discount_start > 0) && (current_time < discount_end)){
            return <View>
                <View style={{flexDirection:'row',backgroundColor:'white',alignItems:'center',marginTop:15,}}>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        <Text style={styles.ming_e}>{show_txt}</Text>
                        <Text style={styles.ming_e_show}>{showText}</Text>
                        <Text style={styles.ming_e}>{ren}</Text>
                    </View>
                    <View style={{flex:1}}/>

                    {info.amount > info.price?<View style={{flexDirection:'row',marginRight:9,alignItems:'center',marginTop:6}}>
                        <View style={{flexDirection:'row',alignItems:'center',position:'absolute'}} onLayout={({nativeEvent:e})=>this.layout(e)}>
                            <Text style={{color:'#999999',fontSize:10}}>原价</Text>
                            <Image style={{width:4,height:5,marginTop:4,marginLeft:2,marginRight:2}} source={require('../../../res/img/order/order_bi.png')}/>
                            <Text style={{color:'#999999',fontSize:12}}>{info.amount}</Text>
                        </View>
                        <View style={{width:this.state.text_height,height:1,backgroundColor:'#555555',alignItems:'center',}}/>
                    </View>:<View/>}
                </View>
                <View style={{marginBottom:15,marginTop:6,flexDirection:'row',alignItems:'center'}}>
                    <Text style={{color:'#333333',fontSize:11,}}>距离</Text>
                    <Text style={{color:'#db3843',fontSize:14}}>{discount}</Text>
                    <Text style={{color:'#333333',fontSize:11,}}>折还剩</Text>
                    <SelectRebateCountDown
                        // date={new Date()}
                        style={{marginTop:4}}
                        date={item.end_at}
                        daysStyle={styles.reabte_text}
                        hoursStyle={styles.reabte_text}
                        minsStyle={styles.reabte_text}
                        secsStyle={styles.reabte_text}
                        // firstColonStyle={styles.colon}
                        // secondColonStyle={styles.colon}
                    />
                    <View style={{flex:1}}/>
                    <View style={{flexDirection:'row',marginRight:10,alignItems:'center'}}>
                        <Image style={{width:6,height:7,marginTop:7}} source={require('../../../res/img/select/select_price.png')}/>
                        <Text style={styles.price}>{info.price}</Text>
                    </View>
                </View>
            </View>
        } else {
            return <View style={{flexDirection:'row',backgroundColor:'white',alignItems:'center',marginTop:15,marginBottom:15}}>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Text style={styles.ming_e}>{show_txt}</Text>
                    <Text style={styles.ming_e_show}>{showText}</Text>
                    <Text style={styles.ming_e}>{ren}</Text>
                </View>
                <View style={{flex:1}}/>

                {info.amount > info.price?<View style={{flexDirection:'row',marginRight:9,alignItems:'center',marginTop:6}}>
                    <View style={{flexDirection:'row',alignItems:'center',position:'absolute'}} onLayout={({nativeEvent:e})=>this.layout(e)}>
                        <Text style={{color:'#999999',fontSize:10}}>原价</Text>
                        <Image style={{width:4,height:5,marginTop:4,marginLeft:2,marginRight:2}} source={require('../../../res/img/order/order_bi.png')}/>
                        <Text style={{color:'#999999',fontSize:12}}>{info.amount}</Text>
                    </View>
                    <View style={{width:this.state.text_height,height:1,backgroundColor:'#555555',alignItems:'center',}}/>
                </View>:<View/>}
                <View style={{flexDirection:'row',marginRight:10,alignItems:'center'}}>
                    <Image style={{width:6,height:7,marginTop:7}} source={require('../../../res/img/select/select_price.png')}/>
                    <Text style={styles.price}>{info.price}</Text>
                </View>
            </View>
        }
    }

    layout=(e)=>{  console.log(e)
        this.setState({text_height:e.layout.width})
    }
}


const styles = StyleSheet.create({
    reabte_text:{
        color:'#db3843',
        fontSize: 14,
    },
    container: {
        marginLeft: 12,
        marginRight: 12,
        backgroundColor: 'white',
        borderRadius: 5,
        flex: 1,
        shadowColor: '#B5B5B6',
        shadowOffset: {
            h: 2,
            w: 2
        },
        shadowRadius: 1,
        shadowOpacity: 0.4,
        paddingLeft: 12,
    },
    title: {
        fontWeight: 'bold',
        color: 'rgba(0,0,0,0.8)',
        fontSize: 16,
        width: (width - 100),
    },
    time: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.5)',
        fontWeight: '200',
    },
    teacher: {
        marginTop: 4,
        fontSize: 9,
        color: 'rgba(0,0,0,0.4)',
    },
    teacher_show: {
        fontSize: 9,
        color: 'rgba(0,0,0,0.8)',

    },

    ming_e: {
        fontSize: 12,
        color: 'rgba(0,0,0,0.7)',
        fontWeight: '200',
    },
    ming_e_show: {
        fontSize: 14,
        color: '#db3843',
        fontWeight: 'bold',
    },
    price: {
        color: 'rgba(197, 50, 60, 1)',
        fontSize: 19,
        fontWeight: '700',
        marginLeft: 6,
    }

})


export default SelectGoodCourseCell